<template>
    <div class="top-container" @click="handleClick" v-if="isShow">
        Top
    </div>
</template>

<script setup>
import eventBus from "../../eventBus.js";
import { ref, onBeforeMount, onBeforeUnmount } from "vue"
const isShow = ref(false);

const handleScroll = (container) => {
    isShow.value = false;
    const range = 100;
    if (!container) {
        return;
    }
    const top = container.scrollTop;
    if (top >= range) {
        isShow.value = true;
    }
}

function handleClick() {
    eventBus.emit('scrollTop', 0)
}


onBeforeMount(() => {
    eventBus.on('mainScroll', handleScroll);
});


onBeforeUnmount(() => {
    eventBus.off('mainScroll', handleScroll);
})

</script>

<style lang="less" scoped>
.top-container {
    width: 50px;
    height: 50px;
    background-color: #6b9eee;
    position: absolute;
    right: 50px;
    bottom: 50px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    border-radius: 50%;
}
</style>